<template>
	<div class="box8">
		<div class="topb">
			<el-input placeholder="请输入商品名称" class="inpsa" v-model="inpgoodsname" @keyup.enter.native="search"></el-input>
			<el-date-picker placeholder="请输入开始时间" style="width: 170px; margin-right: 10px;" v-model="startTime">
			</el-date-picker>
			<el-date-picker placeholder="请输入结束时间" style="width: 170px; margin-right: 10px;" v-model="endTime">
			</el-date-picker>
			<el-input placeholder="请输入用户名" class="inpsa" v-model="inpusername" @keyup.enter.native="search"></el-input>
			<el-button type="primary" icon="el-icon-search" class="search" @click.native="search">搜索</el-button>
			<el-button type="primary" @click.native="back" class="back">返回</el-button>
			<!-- <div class="addto" @click="upPage">
				<i class="el-icon-plus"></i>
				<span>添加</span>
			</div> -->
		</div>
		<div class="banner">
			<el-table :data="ticket" style="width: 100%" @row-click="handleClickTableRow">
				<el-table-column prop="outletName" label="门店名">
				</el-table-column>
				<el-table-column prop="wareName" label="商品名称">
				</el-table-column>
				<el-table-column prop="userName" label="用户信息">
				</el-table-column>
				<el-table-column prop="sellTime" label="销售时间">
				</el-table-column>
				<el-table-column prop="price" label="商品价格">
				</el-table-column>
				<el-table-column prop="vipPrice" label="会员价格">
				</el-table-column>
				<el-table-column prop="actPrice" label="实际价格">
				</el-table-column>
				<el-table-column prop="sellDescr" label="备注">
				</el-table-column>
			</el-table>
			<!--分页-->
			<el-row>
				<el-col style="text-align:right">
					<el-pagination layout="prev, pager, next" :total="total" :page-size="pagesize"
						:current-page="currentpage" @current-change='changePage'></el-pagination>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			baseUrl: require("../assets/baseUrl.js").baseUrl,
			inpgoodsname: "",
			startTime:"",
			endTime:"",
			inpusername: "",
			name: "",
			goodsname: "",
			date: "",
			username: "",
			total: 0, //总数据条数
			currentpage: 1, //当前所在页默认是第一页
			pagesize: 5, //每页显示多少行数据 默认设置为10
			ticket: [], //这里是从后端获取的所有数据
			outletId:0
		}
	},
	methods: {
		//每行点击
		handleClickTableRow(row){
			this.$router.push("/staticsproject/statisticsdetails?outletId="+this.outletId+"&userId="+row.userId)
		},
		//返回上一级
		back(){
			this.$router.push("/staticsproject/salemanager")
		},
		changePage(page) {
			this.currentpage = page
			this.searchs()
		},
		// 获取页面的表格所有数据
		getTicket() {
			this.$http.post(this.baseUrl+"sells/getAllSellByOutletId",{
				page:this.currentpage,
				size:this.pagesize,
				outletId:this.outletId
			}).then(res=>{
					this.ticket=res.data.data.sells
					this.total=res.data.data.totalPages*this.pagesize
			})
		},
		//搜索
		search(){
			this.currentpage=1
			this.searchs()
		},
		searchs() {
			//处理时间
			this.$http.post(this.baseUrl+"sells/getAllSellByOutletId",{
				page:this.currentpage,
				size:this.pagesize,
				outletId:this.outletId,
				wareName:this.inpgoodsname,
				beginTime:this.startTime,
				endTime:this.endTime,
				userName:this.inpusername
			}).then(res=>{
					this.ticket=res.data.data.sells
					this.total=res.data.data.totalPages*this.pagesize
			})
		}
	},
	mounted() {
		this.outletId=	this.$route.query.outletId
		this.getTicket()
		this.startTime=sessionStorage.getItem("newstartTime")
		this.endTime=sessionStorage.getItem("newendTime")
		if(this.startTime!="" || this.endTime!=""){
			this.searchs()
		}
	}
}
</script>
<style lang="less">
.box8 {
	display: flex;
	flex-direction: column;
	.back{
		width: 80px;
		height: 40px;
		margin-top: 10px;
		position: absolute;
		right: 5%;
	}
	.topb {
		width: 80vw;
		height: 65px;
		display: flex;
		line-height: 60px;
		margin-bottom: 15px;
		margin-left: 30px;
		position: relative;
	}

	.banner {
		float: left;
		display: flex;
		flex-direction: column;
		width: 80vw;
		margin-left: 30px;
	}

	.el-pagination {
		margin-top: 30px;
		text-align: center;
	}

	.el-input__prefix {
		font-size: 24px;
	}

	.inpsa {
		width: 140px;
		margin-right: 10px;
	}

	.heng {
		height: 65px;
		line-height: 60px;
		font-size: 20px;
		margin-left: 30px;
	}

	.cell {
		text-align: center;
		display: flex;
		justify-content: center;
	}

	.el-input--prefix .el-input__inner {
		width: 170px;
	}

	.search {
		width: 80px;
		height: 40px;
		margin-top: 10px;
		position: relative;
		padding: 0px 26px 0 5px;

		.el-icon-search {
			position: absolute;
			top: 12px;
			right: 7px;
			font-size: 17px;
		}

		.el-button--primary>span {
			position: absolute;
			left: 15px;
			top: 35%;
		}
	}

	// .addto {
	// 	width: 40px;
	// 	height: 50px;
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	position: absolute;
	// 	right: 10px;
	// }

	// .el-icon-plus {
	// 	width: 40px;
	// 	height: 34px;
	// 	font-size: 34px;
	// 	text-align: center;
	// }

	// .addto>span {
	// 	width: 40px;
	// 	height: 20px;
	// 	text-align: center;
	// 	font-size: 12px;
	// 	line-height: 20px;
	// }
}
</style>